import React, { useState } from 'react'
import { Form, Input, Switch, Button, Upload, TreeSelect, message, Image, Modal } from 'antd'
import { addCates } from '@/api/cate'
import { useNavigate } from 'react-router-dom'

export default function CateAdd(props: any) {
    const navigate = useNavigate()

    // 提交表单后 onfinish调用
    const submitAddCate = (params = {}) => {
        // 发出新增请求
        addCates({
            ...params,
            cateIcon
        }).then(res => {
            if (res.data.code === 200) {
                message.success(res.data.msg, 2, () => {
                    navigate(0)
                })
            }
        })
    }

    // 图片上传改变 进行 操作
    let [cateIcon, setCateIcon] = useState()
    const uploadStateChange = (info: any) => {
        if (info.file.status === "done") {
            //  上传完成
            // if (info.file.response.code === 200) {
            setCateIcon(cateIcon = info.file.response.data.url)

            message.success("图片上传成功", 2, () => {
                // navigate(0)
            })
        }
        // }
    }



    return (
        <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
            initialValues={{ enable: true }}
            onFinish={submitAddCate}
            autoComplete="off"
        >
            <Form.Item
                label="商品分类名"
                name="cateName"
                rules={[{ required: true, message: '分类名必填！' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="是否启用"
                name="enable"
                valuePropName='checked'
                rules={[
                    { required: true, message: '必须选择启用!' }
                ]}
            >
                <Switch checkedChildren="启用" unCheckedChildren="禁用" />
            </Form.Item>

            <Form.Item
                label="父级分类"
                name="pid"
                valuePropName='checked'
                rules={[{ required: true, message: '父级分类必填！' }]}
            // wrapperCol={{ offset: 8, span: 16 }}
            >
                <TreeSelect
                    showSearch
                    style={{ width: '100%' }}
                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                    placeholder="选择父级分类"
                    allowClear
                    treeDefaultExpandAll
                    // 接收父组件数据 渲染到子组件
                    treeData={props.cates}
                    fieldNames={
                        {
                            label: 'cateName',
                            value: 'id',
                            children: 'children'
                        }
                    }
                />
            </Form.Item>

            <Form.Item
                label="分类图标"
                name="cateIcon"
            >
                <Upload
                    name='file'
                    action="/api/upload"
                    accept='.gif, .png, .jpg'
                    onChange={
                        uploadStateChange
                    }
                >
                    <Button>点击上传</Button>
                </Upload>
                <Image width={cateIcon ? 100 : 0} src={cateIcon} />

            </Form.Item>

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    确定新增
                </Button>
            </Form.Item>
        </Form>
    )
}
